<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 根元素 html */
      :root {
        --el-border: 1px solid red;
        --el-button-border-color: red;
        --el-border-radius-base: 4px;
      }

      .my-button--primary {
        /* 定义一个css变量 */
        --el-button-text-color: #fff;
        --el-button-font-weight: 500;
        --el-button-bg-color: #79bbff;
        --el-button-border-color: #79bbff;
      }

      .my-button--primary.is-plain {
        --el-button-text-color: #79bbff;
        --el-button-bg-color: #ecf5ff;
      }

      .my-button--success {
        --el-button-text-color: #fff;
        --el-button-font-weight: 500;
        --el-button-bg-color: #95d475;
        --el-button-border-color: #95d475;
      }

      .my-button--success.is-plain {
        --el-button-text-color: #95d475;
        --el-button-bg-color: #f0f9eb;
      }

      .my-button--danger {
        --el-button-text-color: #fff;
        --el-button-font-weight: 500;
        --el-button-bg-color: #f89898;
        --el-button-border-color: #f89898;
      }

      .my-button--danger.is-plain {
        --el-button-text-color: #f89898;
        --el-button-bg-color: #fef0f0;
      }

      .my-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        height: 32px;
        white-space: nowrap;
        cursor: pointer;
        color: var(--el-button-text-color);
        text-align: center;
        box-sizing: border-box;
        outline: none;
        transition: 0.1s;
        font-weight: var(--el-button-font-weight);
        user-select: none;
        vertical-align: middle;
        -webkit-appearance: none;
        background-color: var(--el-button-bg-color);
        border: var(--el-border);
        border-color: var(--el-button-border-color);
        padding: 8px 15px;
        font-size: var(--el-font-size-base);
        border-radius: var(--el-border-radius-base);
      }

      .my-button.is-round {
        /* 修改样式 */
        border-radius: 20px;

        /* 修改样式使用的变量 */
        /* --el-border-radius-base: 20px; */
      }

      .my-button.is-disabled {
        cursor: not-allowed;
      }

      .my-button__loading {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: red;
      }

      .box {
        --el-button-border-color: green;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({
        template: `
          <MyButton type="primary">按钮1</MyButton>
          <MyButton type="success">按钮2</MyButton>
          <MyButton type="danger">按钮3</MyButton>

          <hr />

          <MyButton type="primary" plain @click="handleClick">按钮1</MyButton>
          <MyButton type="success" plain>按钮2</MyButton>
          <MyButton type="danger" plain>按钮3</MyButton>

          <hr />

          <MyButton type="primary" disabled plain round @click="handleClick">按钮1</MyButton>
          <MyButton type="success" disabled plain round>按钮2</MyButton>
          <MyButton type="danger" disabled plain round>按钮3</MyButton>

          <hr />

          <MyButton type="primary" loading @click="handleClick">按钮1</MyButton>
          

          <button class="my-button">普通元素</button>
        `,

        methods: {
          handleClick() {
            alert("handleClick");
          },
        },
      });

      app.component("MyButton", {
        // inheritAttrs: false, // 禁用继承

        // props: ["type", "plain"],
        props: {
          type: String,
          plain: {
            type: Boolean,
            default: false,
          },
          round: {
            type: Boolean,
            default: false,
          },
          disabled: {
            type: Boolean,
            default: false,
          },
          loading: {
            type: Boolean,
            default: false,
          },
        },

        computed: {
          isDisabled() {
            return this.disabled || this.loading;
          },
        },

        template: `
          <button 
            :class="['my-button', 'my-button--' + type, {'is-plain': plain}, {'is-round': round}, {'is-disabled': disabled}]"
            :disabled="isDisabled"
            >
            <span v-if="loading" class="my-button__loading"></span>
            <slot></slot>  
          </button>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
